<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--
    <a onClick="onc()">dasdasd</a>
    <div style="width:400px; height:400px; border: 1px solid #f00;"></div>
    <div id="nn" style="border:1px solid #666">
        <div style="height:900px;">sadasdasd</div>
    </div>

<div  id="div_1">
    <form id="myForm">
        姓名：<input type="text" name="username"><br/>
        邮件：<input type="text" name="email" >
        <input type="button" value="submit">
    </form>
</div>
-->
<div class="div1" style="width:100px;height: 100px;background: #0AA5DF">

</div>
<div style="width:100px;height: 100px;">

</div>
<div class="div2" style="width:100px;height: 100px;background: #234598;">

</div>
<div class="div3" style="width: 100px;height: 800px;background: #990022">

</div>
<script>
    var div1 = document.getElementsByClassName('div1')[0];
    var div2 = document.getElementsByClassName('div2')[0];

</script>

</body>
<script src="../js/JSCommon.js"></script>
<script type="text/javascript">
    /**
     *     //作为一个事件的函数来被调用
     function onc () {
        var dd = document.getElementById("nn").scrollIntoView(false);
        //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示
    }
     function divFun() {
        alert('div click');
        return false;
    }
     function btnFun() {
        alert('btn click');
         var e =window.event ||event;
         if(e.stopPropagation){
         e.stopPropagation();
         }else{
         window.event.cancelBubble = true;
         }
        return false;
    }
     var div_1 = document.getElementById('div_1');
     EventUtil.addHandler(div_1,'click',divFun);
     * */

    var div1 = document.getElementsByClassName('div1')[0];
    var div2 = document.getElementsByClassName('div2')[0];
    EventUtil.addHandler(div1,'mouseout',function (event) {
        console.info(event);
        this.style.backgroundColor='red';
    });
    EventUtil.addHandler(div1,'mouseover',function (event) {
        this.style.backgroundColor='#0AA5DF';
    });
    EventUtil.addHandler(div2,'mouseout',function (event) {
        this.style.backgroundColor='#234598';
    });
    EventUtil.addHandler(div2,'mouseover',function (event) {
        this.style.backgroundColor='yellow';
    });
    EventUtil.addHandler(document,"DoMMouseScroll",function (event) {
        event  = EventUtil.getEvent(event);
        console.info(event);
    })

</script>

</html>